<template>
  <div class="common-layout">

    <el-container>
      <el-aside>

        <el-row>
          <el-col :span="6">
            <router-link :to="{name:'AddCustomer'}">
              <el-button class="my_button" icon="el-icon-document-copy" type="info">录入客户信息</el-button>
            </router-link>
          </el-col>

        </el-row>
        <el-row>
          <el-col :span="6">
            <router-link :to="{name:'CustomerManager'}">
              <el-button class="my_button" icon="el-icon-document-copy" type="info">客户管理</el-button>
            </router-link>
             </el-col>
        </el-row>

      </el-aside>


      <el-main>
        <div class="handle-box">
          客户类别：
          <el-select v-model="customerQuery.sort" placeholder="请选择" class="handle-select mr10">
            <el-option label="全部" :value=null></el-option>
            <el-option label="重要客户" :value="15"></el-option>
            <el-option label="中等客户" :value="10"></el-option>
            <el-option label="普通客户" :value="5"></el-option>
          </el-select>
          客户姓名：
          <el-input v-model="customerQuery.name" placeholder="请输入" class="handle-input mr10"></el-input>
          <el-button type="primary" icon="el-icon-search" @click="getNotAnaCustomer()"></el-button>
        </div>

        <el-row>
          <el-col :span="24">
            <el-button icon="el-icon-circle-check" style="margin-right: 1200px;font-size: 24px">未分析的客户</el-button>
          </el-col>
        </el-row>
        <el-table
            :data="customerList"
            border
            style="width: 100%"
            :header-cell-style="headClass"
            :cell-style="rowClass"
            class="table"
            ref="multipleTable"
            header-cell-class-name="table-header"
            @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" ></el-table-column>
          <el-table-column prop="name" label="姓名" ></el-table-column>
          <el-table-column prop="professional" label="职业"></el-table-column>
          <el-table-column prop="birthday" label="年龄">
            <template #default="scope">
              {{calcAge(scope.row.birthday)+'岁'}}
            </template>
          </el-table-column>
          <el-table-column align="right">
            <template #header #default="scope">
              <el-button  class="my_button" type="text"  @click="selectAnalyVisible = true" >
                批量性格分析
              </el-button>
              <el-button
                  class="my_button"
                  type="text"
                  @click="deleteCustomerBatch"
                  icon="el-icon-delete">
              </el-button>
            </template>
            <template #default="scope">
              <router-link :to="{name:'CustomerInfo', params:{id: scope.row.id}}">
                <el-button size="medium" icon="el-icon-edit" id="view-btn">查看</el-button>
              </router-link>
              <el-button
                  type="primary"
                  @click="addToArray(scope.row.id)">
                分析
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页  -->
        <el-pagination
            :current-page="currentPage"
            :page-size="pageSize"
            :total="total"
            style="padding: 30px 0; text-align: center;"
            layout="total, prev, pager, next, jumper"
            @current-change="getNotAnaCustomer"
        />



        <el-dialog title="" v-model="selectAnalyVisible" width="80%">
        <div class="image_container">
          <div>
            <i class="el-icon-tickets my_icon1"></i><span class="my_analysis_p1">性格分析报告</span>
            <el-divider></el-divider>
          </div>
          <div class="my_color">
            <i class="el-icon-data-analysis my_icon1  my_color"></i><span class="my_analysis_p5">报告展示</span>
            <el-divider style="width: 25%;"></el-divider>
          </div>
          <div>
            <el-checkbox v-model="checked1" label="笔迹特征" border></el-checkbox>
            <el-checkbox v-model="checked2" label="性格分析" border></el-checkbox>
            <el-checkbox v-model="checked3" label="卡式测定" border></el-checkbox>
            <el-checkbox v-model="checked4" label="职业建议" border></el-checkbox>
          </div>
          <div class="my_color" style="margin-top: 30px">
            <i class="el-icon-data-line my_icon1  my_color"></i><span class="my_analysis_p5">分析算法</span>
            <el-divider style="width: 25%;"></el-divider>
          </div>
          <div style="margin-bottom: 20px">
            <el-select v-model="selectedAnaId" placeholder="请选择合适的分析算法">
              <el-option
                  v-for="anaId in anaIds"
                  :key="anaId.value"
                  :label="anaId.label"
                  :value="anaId.value"
              >
              </el-option>
            </el-select>
            <br/>

            <el-button class="my_button" type="info" @click="selectAnalyVisible = false">
              取消
            </el-button>
              <el-button class="my_button" type="primary" @click="batchAnaly">
                开始分析
              </el-button>
          </div>

        </div>
        </el-dialog>
      </el-main>


    </el-container>

  </div>
</template>

<script>
import customer from "@/api/customer/customer";
export default {
  name: "Main",
  data() {
    return {
      selectAnalyVisible: false,
      customerList: null,
      pageSize: 5,
      currentPage: 1,
      total: 0,
      customerQuery: {
        sort: null,
        name: null,
        userId: null,
        status: 1,
      },
      // 选中用户信息
      multipleSelection: [],
      // 选中用户编号
      customerIdSelected: [],
      selectedAnaId: null,
      anaIds: [
        {
          value: '1',
          label: '分析算法',
        },
        {
          value: '2',
          label: '分析算法2',
        }
      ],
    }
  },
  created() {
    let user = JSON.parse(localStorage.getItem("SESSION_KEY_USER"));
    this.customerQuery.userId = user.id;
    this.getNotAnaCustomer()
  },
  methods: {
    // 表头居中显示
    headClass() {
      return "text-align:center"
    },
    rowClass() {
      return "text-align:center"
    },
    // 计算年龄
    calcAge(birthdayStr){
      birthdayStr =birthdayStr.substring(0,10);
      let birthday = new Date(birthdayStr.replace(/-/g,"/"));
      let now = new Date();
      let age = now.getFullYear() - birthday.getFullYear() - (now.getMonth() < birthday.getMonth() || (now.getMonth() == birthday.getMonth() && now.getDate() < birthday.getDate()))
      return age;
    },
    initCustomer() {
      this.getNotAnaCustomer()
    },
    // 将点击单个分析的放入到客户选择的数组
    addToArray(id) {
      this.customerIdSelected[0] = id;
      this.selectAnalyVisible = true
    },
    // 进行分析
    batchAnaly() {
        this.$confirm('此操作将分析未分析客户记录，是否继续？','提示',{
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'info',
        }).then(() => {

          let array = [];
          for (let i = 0; i < this.customerIdSelected.length; i++) {
            let id = {};
            id.id = this.customerIdSelected[i];
            array[i] = id;
          }

          array = {array}

          console.log(array);
          customer.batchAnaly(array,this.selectedAnaId).then(response => {
            var list = JSON.stringify(response.data.list)
            console.log("转换后的数据")
            console.log(list)
            this.$router.push({name: 'BatchAnalysis',params:{'list': list}});
          })

         this.customerIdSelected = []
        })
    },
    getNotAnaCustomer(currentPage = 1) {
      this.currentPage = currentPage
      customer.getNotAnaCustomer(this.currentPage, this.pageSize, this.customerQuery)
        .then((response) => {
          this.customerList = response.data.item.records;
          this.total = response.data.item.total;
        }).catch(error => {
          console.log(error);
          this.$message({
            type: 'error'
          })
      })
    },
    // 当选中发生变化时，将客户编号放入customerIdSelected
    handleSelectionChange(val) {
      this.multipleSelection = val

      for (let i = 0; i < this.multipleSelection.length; i++) {
        this.customerIdSelected[i] = this.multipleSelection[i].id
      }
    },
    // 批量删除用户
    deleteCustomerBatch() {
      this.$confirm('此操作将删除用户,是否继续?','提示',{
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        let array = [];
        for (let i = 0; i < this.customerIdSelected.length; i++) {
          let id = {};
          id.id = this.customerIdSelected[i];
          array[i] = id;
        }
        array = {array};
        customer.deleteCustomerBatch(array).then(response => {
          this.initCustomer();
          this.$message({
            type: 'success',
            message: '删除成功',
          })
          return response;
        }).catch((response) => {
          console.log("error:" + response)
        })

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除',
        })
      })
    },
  }
}
</script>

<style scoped>
.el-aside {
  background-color: #d3dce6;
  color: var(--el-text-color-primary);
  text-align: center;
  width: 250px;
}

.el-main {
  background-color: #e9eef3;
  color: var(--el-text-color-primary);
  text-align: center;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.handle-box {
  margin: 20px 50px;
  /*border-style: dashed;*/
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 120px;
  display: inline-block;
  margin: 10px 20px;
}

.table {
  width: 100%;
  font-size: 14px;
}

.mr10 {
  margin-right: 10px;
}

.my_button{
  margin: 5px 30px;
  width: 180px;
  font-size: 16px
}
.my_table{
  margin: 0px 30px;
}
#view-btn {
  margin-right: 20px;
}

.image_container {
  margin: 20px 150px 50px 150px;
  background: #f5f5f5;
  padding: 30px;
  border: 2px solid #ddd;
  border-radius: 5px;
}

.my_analysis_p1 {
  font-size: 21px;
  vertical-align: 5px;
  margin-left: 8px;
  display: inline-block;
}

.my_analysis_p5 {
  font-size: 18px;
  vertical-align: 5px;
  margin-left: 8px;
  display: inline-block;
}

.my_icon1_div {
  float: left;
}

.my_icon1 {
  color: #FFBF00;
  font-size: 40px;
}

.my_color {
  color: red;
}


</style>